import React, { memo, useEffect, useState } from 'react';
import {
  NavBar,
  Button,
  Radio,
  Popup,
  ActionSheet,
  AutoCenter,
  Form,
  Input,
} from 'antd-mobile';
import { message } from 'antd';
import './index.less';
import request from 'umi-request';
import type { Action } from 'antd-mobile/es/components/action-sheet';

import { history } from 'umi';
export default memo(function Address() {
  // 地址数据
  const [addressData, setAddressData] = useState<any>([]);
  // 修改弹出层
  const [edit, setEdit] = useState(false);
  // 删除控制面板
  const [del, setDel] = useState(false);
  // 绑定表单
  const [form] = Form.useForm();
  useEffect(() => {
    getAddressLst();
  }, []);
  // 收货地址列表信息
  async function getAddressLst() {
    let data = await request.get('/api/address/getAddress');
    console.log(data);
    setAddressData(data);
  }
  // 点击默认改变状态跟置顶内容
  async function handerDefault(id: Number, status: Number) {
    let { data, code, msg } = await request.get(
      '/api/address/first?id=' + id + '&status=' + status,
    );
    if (code == 200) {
      setAddressData(data);
      getAddressLst();
      message.success(msg);
    }
  }
  // 修改收货地址
  function editAddress(data: any) {
    setEdit(true);
    form.setFieldsValue(data);
  }
  async function editSave(id: string) {
    console.log(id);
    let body = form.getFieldsValue();
    console.log(body);

    let { code, msg } = await request.post(
      '/api/address/editAddress?id=' + id,
      { data: { body: body } },
    );
    if (code == 200) {
      getAddressLst();
      setEdit(false);
      message.success(msg);
    }
  }
  //点击删除按钮展示控制面板内容
  const actions: Action[] = [
    { text: <span style={{ color: 'red' }}>确定</span>, key: 'ok' },
  ];
  // 判断是否删除收货地址
  async function handlerAction(action: Action, id: String) {
    if (action.key == 'ok') {
      let { code, msg } = await request.delete(
        '/api/address/delAddress?id=' + id,
      );
      if (code == 200) {
        setDel(false);
        getAddressLst();
        message.error(msg);
      }
    } else {
      setDel(false);
    }
  }
  return (
    <div className="address">
      <NavBar className="navbar" onBack={() => history.go(-1)}>
        收货地址
      </NavBar>
      <div className="content">
        {addressData.map((i) => {
          return (
            <div key={i._id}>
              <div className="header">
                <p>
                  <span className="span">{i.name}</span>
                  <span className="span">{i.mobile}</span>
                  {i.status == 0 ? (
                    <Button size="mini" color="primary" className="bt1">
                      默认
                    </Button>
                  ) : (
                    ''
                  )}
                </p>
                <p>{i.city}</p>
              </div>
              <span className="xh"></span>
              <div className="bottom">
                {i.status == '0' ? (
                  '已经设为默认地址'
                ) : (
                  <Radio
                    className="radio"
                    style={{
                      '--icon-size': '18px',
                      '--font-size': '14px',
                      '--gap': '6px',
                    }}
                    onChange={(e) => handerDefault(i._id, e)}
                  >
                    设为默认
                  </Radio>
                )}
                <Button size="mini" onClick={() => setDel(true)}>
                  删除
                </Button>
                <ActionSheet
                  extra="确定要删除该地址吗？"
                  cancelText="取消"
                  visible={del}
                  actions={actions}
                  onAction={(action) => handlerAction(action, i._id)}
                  onClose={() => setDel(false)}
                />
                <Button size="mini" onClick={() => editAddress(i)}>
                  修改
                </Button>
                <Popup
                  visible={edit}
                  showCloseButton
                  onClose={() => setEdit(false)}
                  onMaskClick={() => {
                    setEdit(false);
                  }}
                  bodyStyle={{ height: '60vh' }}
                >
                  <div>
                    <AutoCenter>
                      <p
                        style={{
                          padding: '10px 0 15px 0',
                          fontSize: '15px',
                          color: 'rgb(55, 55, 55)',
                        }}
                      >
                        修改收货地址
                      </p>
                    </AutoCenter>
                    <Form
                      form={form}
                      layout="horizontal"
                      footer={
                        <Button
                          style={{ borderRadius: '30px', marginTop: '50px' }}
                          block
                          type="submit"
                          color="primary"
                          size="large"
                          onClick={() => editSave(i._id)}
                        >
                          保存
                        </Button>
                      }
                    >
                      <Form.Item name="name" label="收货人">
                        <Input />
                      </Form.Item>
                      <Form.Item name="mobile" label="手机号">
                        <Input />
                      </Form.Item>
                      <Form.Item name="city" label="地区">
                        <Input />
                      </Form.Item>
                      <Form.Item name="city" label="详细地址">
                        <Input />
                      </Form.Item>
                    </Form>
                  </div>
                </Popup>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
});
